<template>
  <div>
    <el-container class="layout-container">
      <el-header>
        <div>商店管理员界面</div>
        <div>{{ geren.contacts }}</div>
        <div>管理员：{{ geren.contacts }}<el-button type="text" @click="tuic()" >退出登录</el-button></div></el-header
      >
      <el-container>
        <!-- 菜单 -->
        <el-aside width="200px">
          <div style="margin-top: 50px"></div>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#00b96b"
            text-color="#fff"
            router
          >
            <el-menu-item index="/commodity">
              <el-icon><icon-menu /></el-icon>
              商品管理</el-menu-item
            >
            <el-menu-item index="/ordere">
              <el-icon><document /></el-icon>
              订单管理</el-menu-item
            >
            <el-sub-menu>
              <template #title>
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>个人中心</span>
              </template>
              <el-menu-item index="/gerenxq">
                <el-icon>
                  <User />
                </el-icon>
                <span>基本资料</span>
              </el-menu-item>
              <el-menu-item index="/shimi">
                <el-icon>
                  <Crop />
                </el-icon>
                <span>实名认证</span>
              </el-menu-item>
              <el-menu-item index="/mima">
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>个人资料</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <!-- 界面 -->
        <el-container>
          <el-main><router-view /></el-main>
          <el-footer>loog</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
  
  
  <script setup>
import { ref, reactive, onMounted } from "vue";
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import merchantjs from "@/api/merchant/merchant";
import { useTokenStore } from "@/stores/token.js";
//定义路游器
import { useRouter } from "vue-router";
const router = useRouter();
//商户对象
const geren = ref({});
//获取商户资料
const gerenxx = async (id) => {
  let data = await merchantjs.selectByOne(id);
  geren.value = data.shuju;
  //存放到缓存
  console.log(geren.value)
  useTokenStore().setToken(geren.value);
  // console.log(useTokenStore().token);
};
// 退出清空
const tuic=()=>{
  geren.value={}
  useTokenStore().removeToken();
   router.push("/")
}
//钩子函数
onMounted(() => {
  gerenxx(localStorage.getItem("uid"));
});
</script>
  
  <style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #00b96b;

    &__logo {
      height: 120px;
      background: url("@/assets/logo.png") no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #dce7b2;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>